﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Jun is coming back</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #708090;
        }

        #content {
            margin: auto;
            width: 970px;
            background: whitesmoke;
            min-height: 500px;
            border-radius: 10px 10px 10px 10px;
        }

        #swordman {
            background-image: url(3-swordsmen.jpg);
            width: 600px;
            height: 399px;
            border: 2px solid #00bfff;
            border-radius: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            margin-bottom: 20px;
        }

        #couples {
            background-image: url(couples.jpg);
            width: 600px;
            height: 399px;
            border: 2px solid #00bfff;
            border-radius: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            margin-bottom: 20px;
        }

        #dood {
            background-image: url(dood.png);
            width: 204px;
            height: 175px;
            border: 2px solid #00bfff;
            border-radius: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            margin-bottom: 20px;
            display: none;
        }


        .gray {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }
    </style>
</head>
<body>
    <div id="content">
        <center>
            <h1>Jun is coming back in <span id="t-rest"></span></h1>
            <audio autoplay loop>
                <source src="its-only-the-fairly-tale.mp3" type="audio/mpeg"/>
                <source src="//anjieart.net/its-only-the-fairly-tale.ogg" type="audio/ogg"/>
                <embed src="its-only-the-fairly-tale.mp3"/>
            </audio>
            <div id="dood" title="dood?"></div>
            <div id="swordman" title="3 sword man?"></div>
            <div id="couples" title="top couples"></div>
        </center>
    </div>
    <script>
        document.onreadystatechange = function () {
            if (document.addEventListener || document.readyState === "complete") {

                // target -- the day jun comes back to home country
                var q = window.location.hash;
                if (q && q.length) {
                    q = parseInt(q.substr(1));
                } else {
                    q = 6;
                }
                var target = new Date(2013, q, 31).getTime();
                var diff = target - new Date().getTime();

                var round = Math.round, abs = Math.abs, floor = Math.floor,
                    hasOwnProperty = Object.prototype.hasOwnProperty,
                    slice = Array.prototype.slice;

                Array.prototype.foreach = function () {
                    if (typeof arguments[0] === "function") {
                        var action = arguments[0];
                        for (var k in this) {
                            if (hasOwnProperty.call(this, k)) {
                                action(this[k]);
                            }
                        }
                        return this;
                    } else {
                        throw new Error();
                    }
                };

                var humanize = function (milliseconds) {
                    var seconds = abs(milliseconds) / 1000,
                        minutes = seconds / 60,
                        hours = minutes / 60,
                        days = hours / 24,
                        months = days / 30,
                        years = days / 365;

                    seconds = floor(seconds - floor(minutes) * 60);
                    minutes = floor(minutes - floor(hours) * 60);
                    hours = floor(hours - floor(days) * 24);
                    days = floor(days - floor(months) * 30);
                    months = floor(months - floor(years) * 12);
                    years = floor(years);

                    var buffer = "";

                    if (years > 0)
                        buffer += years + " years ";
                    if (months > 0)
                        buffer += months + " months ";
                    if (days > 0)
                        buffer += days + " days ";
                    if (hours > 0)
                        buffer += hours + " hours ";
                    if (minutes > 0)
                        buffer += minutes + " minutes ";
                    buffer += seconds + " seconds ";

                    return buffer;
                };

                var timer = function () {
                    if (diff > 0) {
                        document.getElementById("t-rest").innerHTML = humanize(diff);
                        diff -= 1000;
                        window.setTimeout(timer, 1000);
                    } else {
                        // jun is 'dead'...
                        document.getElementsByTagName("h1")[0].innerHTML = "Jun is probably 'dood', let's pray for him!";
                        ["dood", "swordman", "couples"].foreach(function (p) {
                            document.getElementById(p).className = "gray";
                        });
                        document.getElementById("dood").style.display = "block";
                    }
                };
                timer();
            }
        };
    </script>
</body>
</html>
